<template>
	<view class="page">

		<u--form labelPosition="left" labelWidth="80px" :model="model1" :rules="rules" ref="uForm">
			<!-- 				<u-form-item label="客户" prop="order.name" borderBottom ref="item1">
					<u--input v-model="model1.order.name" placeholder="请输入客户" border="none"></u--input>
				</u-form-item> -->

			<u-form-item label="客户" prop="order.cust_name" borderBottom @click="showCust = true;" ref="item1">
				<u--input v-model="model1.order.cust_name" disabled disabledColor="#ffffff" placeholder="请选择客户"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="快递单号" prop="order.express_sn" borderBottom ref="item1">
				<u-row>
					<u-col span="10">
						<u--input v-model="model1.order.express_sn" placeholder="请输入或扫描快递单号"></u--input>
					</u-col>
					<u-col span="2">
						<u-icon @tap="getCode" name="scan" size="28"></u-icon>
					</u-col>
				</u-row>
			</u-form-item>
			<u-form-item label="总体积" borderBottom ref="item1">
				<u-row gutter="15">
					<u-col span="2">
						<u--input v-model="model1.order.long_length" placeholder="长cm" border="none"></u--input>
					</u-col>
					<u-col span="2">
						<u--input v-model="model1.order.width_length" placeholder="宽cm" border="none"></u--input>
					</u-col>
					<u-col span="2">
						<u--input v-model="model1.order.height_length" placeholder="高cm" border="none"></u--input>
					</u-col>
				</u-row>
			</u-form-item>

<!-- 			<u-form-item label="物品数量" prop="order.number" borderBottom ref="item1">
				<u-number-box v-model="model1.order.number" ></u-number-box>
			</u-form-item> -->

			<!-- 				<u-form-item label="物品类型" prop="order.type" borderBottom ref="item1">
					<u--input v-model="model1.order.type" placeholder="请输入物品类型" border="none"></u--input>
				</u-form-item> -->
			<u-form-item label="物品类型" prop="order.type_name" borderBottom @click="showType = true;" ref="item1">
				<u--input v-model="model1.order.type_name" disabled disabledColor="#ffffff" placeholder="请选择物品类型"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="物品照片" prop="order.images" borderBottom ref="item1">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="1"></u-upload>
			</u-form-item>
			<u-form-item label="备注" prop="order.remark" borderBottom ref="item1">
				<u--textarea v-model="model1.order.remark" placeholder="请输入备注" count></u--textarea>
			</u-form-item>
		</u--form>
		<!-- 		<u-picker :show="showCust" :columns="custList" keyName="name" @cancel="showCust = false"
			@confirm="custSelect"></u-picker> -->

		<u-popup :show="showCust" @close="custClose">

			<view style="height:100vh">
				<u-cell icon="arrow-left" title="返回" @click="custClose"></u-cell>
				<view style="margin: 20rpx;">
					<u-search :showAction="true" v-model="svalue" actionText="搜索" placeholder="请输入客户" @search="search"
						@custom="search"></u-search>
					<u-list>
						<u-list-item v-for="(item, index) in custList" :key="index">
							<u-cell icon="account-fill" :title="item.name" @click="custSelect(item)">
								<u-tag v-if="item.area" slot="value" :text="item.area"></u-tag>
							</u-cell>
						</u-list-item>
					</u-list>
				</view>

			</view>
		</u-popup>
		<u-picker :show="showType" :columns="typeList" keyName="name" @cancel="showType = false"
			@confirm="typeSelect"></u-picker>
		<u-button @click="submit" class="submit" color="#1e4297">修改</u-button>

	</view>

</template>

<script>
	import * as Config from '@/utils/config.js';
	export default {
		data() {
			return {
				fileList1: [],
				model1: {
					order: {
						express_sn: '',
						remark: '',
						number: 1
					}
				},
				rules: {
					'order.cust_name': {
						type: 'string',
						required: true,
						max: 30,
						message: '请填写客户',
						trigger: ['blur', 'change']
					},

					'order.express_sn': {
						type: 'string',
						max: 30,
						required: true,
						message: '请填写快递单号',
						trigger: ['blur', 'change']
					},
				},
				svalue: '',
				showCust: false,
				showType: false,
				custList: [],
				typeList: [],

			}
		},
		onLoad(e) {
			this.getTypeList()
			this.getDetail(e.nid)
		},
		onShow() {

		},
		methods: {

			getDetail(nid) {
				uni.request({
					url: Config.baseUrl + '/api/app/order.php?act=detail',
					data: {
						nid: nid
					},
					success: (res) => {
						this.model1.order = res.data.data
						if (this.model1.order.image) {
							this.fileList1.push({
								url: this.model1.order.image
							})
						}

					}
				});
			},
			search(e) {
				this.page = 1
				this.getCustList()
			},

			custClose() {
				this.showCust = false
			},

			custSelect(e) {
				this.showCust = false
				this.model1.order.cust_name = e.name
				this.model1.order.user_id = e.nid
				this.$refs.uForm.validateField('order.name')
			},
			typeSelect(e) {

				this.showType = false
				this.model1.order.type_name = e.value[0].name
				this.model1.order.type_id = e.value[0].nid
				this.$refs.uForm.validateField('order.type')
			},

			getCustList() {
				uni.request({
					url: Config.baseUrl + '/api/app/custom.php?act=list',
					data: {},
					success: (res) => {
						this.custList = res.data.data
					}
				});
			},
			getTypeList() {
				uni.request({
					url: Config.baseUrl + '/api/app/custom.php?act=type',
					data: {},
					success: (res) => {
						this.typeList.push(res.data.data)
					}
				});
			},

			getCode() {
				let that = this;
				uni.scanCode({
					// onlyFromCamera: true,
					success: function(res) {
						that.model1.order.express_sn = res.result
					},
					fail(res) {
						console.log(res)
					}
				});
			},
			sectionChange(index) {
				this.curNow = index;
			},

			valChange(e) {

				console.log('当前值为: ' + e.value)
			},
			gotoDetail() {
				uni.navigateTo({
					url: '/pages/index/detail'
				});
			},
			submit() {

				this.$refs.uForm.validate().then(res => {
					//uni.$u.toast('校验通过')

					uni.request({
						url: Config.baseUrl + '/api/app/order.php?act=update', //仅为示例，并非真实接口地址。
						data: this.model1.order,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						method: 'POST',
						success: (res) => {

							if (res.data.status == 200) {
								uni.$u.toast('修改成功')
							} else {
								uni.$u.toast(res.data.msg)
							}

						}
					});

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},


			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						// url: lists[i].url
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: Config.baseUrl + '/api/app/order.php?act=upload_img', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let d = JSON.parse(res.data)
							if (d.status == 200) {
								this.model1.order.image = d.data

								setTimeout(() => {
									resolve(d.data)
								}, 1000)
							} else {
								uni.$u.toast('上传失败')
							}
						}
					});
				})
			},


		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style scoped lang="scss">
	.page {
		margin: 20rpx;

		.submit {
			margin-top: 80rpx;
			background: #1e4297;
			color: #fff;
		}
	}
</style>